import { Button,  Form, Input, message } from "antd";
import { UserOutlined, LockOutlined, CloseCircleOutlined } from "@ant-design/icons";
import { setToken } from "@/utils/token";
import { loginApi } from "@/apis";
import { useNavigate } from "react-router-dom";




export default function LoginForm() {
  const navigate = useNavigate()
  const onFinish = async (values: any) => {
    setToken(values.username)
    const res = await loginApi(values)
    message.success(res.data.success);
    navigate('/')
  }
  const onFinishFailed = () => {
    console.log('点击onFinishFailed');
  }

  type FieldType = {
    username?: string;
    password?: string;
    remember?: string;
  };


  return (
    <Form
      name="basic"
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      size="large"
      autoComplete="off"
    >
      <Form.Item<FieldType>
        name="username"
        rules={[{ required: true, message: '请填写你的用户名!' }]}
      >
        <Input placeholder="用户名：admin / user" prefix={<UserOutlined />} />
      </Form.Item>

      <Form.Item<FieldType>
        name="password"
        rules={[{ required: true, message: '请填写你的密码！' }]}
      >
        <Input.Password autoComplete="new-password" placeholder="密码：123456" prefix={<LockOutlined />} />
      </Form.Item>

      <Form.Item  className="login-btn" >
        <Button  icon={<CloseCircleOutlined />}>
          重置
        </Button>



        <Button type="primary" htmlType="submit" icon={<LockOutlined />}>
          登录
        </Button>
      </Form.Item>
    </Form>
  )
}
